@import "./all.scss";
#allorder{
  background:#fff;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: auto;
  overflow-x: hidden;
  #allorder-header{
    height: 1rem;
    text-align: center;
    color: black;
    font-size: .34rem;
    background: white;
    position: relative;
    border-bottom:1px solid #e6e6e6;
    img{
      height: .4rem;
      position: absolute;
      left: .4rem;
      top: .3rem;
    }
  }
  nav{
    display: flex;
    text-align: center;
    height: .8rem;
    position: fixed;
    z-index: 100;
    justify-content: space-between;
    width: 100%;
    background: white;
    border-bottom: 1px solid #e6e6e6;
    align-items: center;
    div{
      flex: 1;
      font-size: .28rem;
      color: #323232;
      font-size:.28rem;
    }
    div.active{
      color: #9948c3;
    }
    p{
      height: .04rem;
      width: 1rem;
      background: #9948c3;
      position: absolute;
      bottom: 0;
      transition: .3s left;
      border-top-left-radius: .02rem;
      border-top-right-radius: .02rem;
      margin-left: .25rem;
    }
  }
  .opaText{
    width: 6rem;
    background: white;
    position: fixed;
    top: 25%;
    border-radius: .24rem;
    left: 10%;
    z-index: 9999;
    .allP{
      font-size:.28rem;
      color:#323232;
      padding: .7rem 0;
      text-align: center;
      p{
        text-align: center;
        span{
          color:#9948c3;
        }
      }
    }
    .opacul{
      display: flex;
      justify-content: space-between;
      border-top:1px solid #e6e6e6;
      li{
        padding:.32rem 0;
      }
      .opback{
        width: 50%;
        font-size:.3rem;
        color:#646464;
        text-align: center;
        border-right: 1px solid #e6e6e6;
      }
      .opsure{
        width: 50%;
        font-size:.3rem;
        color:#323232;
        text-align: center;
      }
    }
  }
  .wrap-swiper{
    flex: 1;
    width: 100%;
    background: #F3F3F3;
    margin-top: .8rem;
    .mar{
      width: 100%;
      height:.8rem;
    }
    .two{
      background: #fff;
      .contest{
        width:100%;
        overflow: hidden;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left{
          margin:.26rem 0;
          margin-left:.24rem;
          line-height:.6rem;
          .text{
            font-size:.28rem;
            color:#323232;
            display: flex;
            align-items: center
          }
          .texts{
            font-size:.26rem;
            color:#9948c3;
          }
          .minutes{
            font-size:.18rem;
            color:#646464;
          }
        }
        .right{
          .success{
            line-height: .5rem;
            font-size:.24rem;
            color:#9948c3;
            margin-right:.24rem;
          }
        }
      }
      .cutDetail{
        float:left;
        width:100%;
        border-top:1px solid #e6e6e6;
        .photo{
          float:left;
          img{
            width:1.5rem;
            height:1.5rem;
            margin:.2rem .26rem .2rem .24rem;
            display: block;
          }
        }
        .cut-right{
          float:left;
          width:5.24rem;
          margin-top:.28rem;
          .one{
            font-size:.24rem;
            color:#323232;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
          .twos{
            font-size: .22rem;
            color: #646464;
            margin: .08rem 0;
            display: flex;
            justify-content: space-between;
          }
          .three{
            color:#323232;
            font-size:.24rem;
            .money{
              font-size: .24rem;
              font-weight: bold;
            }
          }
        }
      }

      .cut-btn{
        float:left;
        border-top:1px solid #e6e6e6;
        width:100%;
        .number{
          height:.7rem;
          background:white;
          border-bottom:1px solid #e6e6e6;
          overflow: hidden;
          .numB{
            display:flex;

            line-height:.7rem;
            justify-content: space-between;
            .right{
              margin-right:.24rem;
              color:#969696;
              font-size:.24rem;
            }
            .left{
              margin-left:.24rem;
              color:#323232;
              font-size:.24rem;
            }
          }
        }
        .allMoney{
          font-size: .24rem;
          color: #323232;
          margin-top: .2rem;
          float: right;
          padding: 0;
          margin-right: .24rem;

        }
        .btn{
          display:flex;
          float: right;
          margin: .26rem 0;
          clear: both;
          button{
            width:1.56rem;
            height:.54rem;
            border:1px solid #646464;
            font-size:.26rem;
            color:#646464;
            border-radius: .27rem;
            background:white;
            margin-right:.24rem;
          }
          button:nth-last-child(1){
            width:1.56rem;
            height:.54rem;
            border:1px solid #9948c3;
            font-size:.26rem;
            color:#9948c3;
            border-radius: .27rem;
            background:white;
            margin-right:.24rem;
          }
          .btn-look{
            color:#9948c3;
            width:1.56rem;
            height:.54rem;
            border:1px solid #9948c3;
            font-size:.26rem;
            border-radius: .27rem;
            background:white;
          }
        }
      }
      .space{
        float:left;
        width:100%;
        height:.2rem;
        background:#f6f6f6;
      }
    }
  }
  .loading{
    text-align: center;
    font-size: .28rem;
    margin: -.2rem auto 0;
    img{
      vertical-align: middle;
    }
  }
  .toBottomOfPage{
    display: block;
    margin: -.2rem auto 0;
    text-align: center;
    font-size: .28rem;
  }
  .refund{
    width: 100%;
    overflow: hidden;
    div{
      width: 100%;
      font-size: .28rem;
      display: flex;
      flex-direction: row;
      align-items: center;
      position: relative;
      border-bottom: .01rem solid #e6e6e6;
      margin-left: .24rem;
      height: 1rem;
      p{
        margin-left: .54rem;
        color:#969696;
        font-size: .24rem;
      }
      img{
        width: .3rem;
        height: .16rem;
        position: absolute;
        top: 50%;
        right: .24rem;
        transform: translate(-50%,-50%);
      }
    }
  }
  .explain{
    width: 100%;
    overflow: hidden;
    height: 3.5rem;
    border-bottom: .01rem solid #e6e6e6;
    div{
      width: 100%;
      padding: .36rem 0 0 .24rem;
      font-size: .28rem;
      display: flex;
      flex-direction: row;
      align-items: center;
      position: relative;
      p:nth-of-type(2){
        color: #969696;
        position: absolute;
        top: 50%;
        right: .24rem;
        //transform: translate(0,-50%);
      }
    }
    .inpexplain{

      textarea::-webkit-input-placeholder{
        color:#969696;
        font-size:.28rem;
      }
      textarea{
        width: 95%;
        height: 2.35rem;
        resize: none;
        border: 0;
        outline: none;
        font-size: .28rem;
      }
    }

  }
  .tel{
    margin-left: .24rem;

    overflow: hidden;
    font-size: .28rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    input{
      padding: .36rem 0 .36rem .54rem;
      font-size: .28rem;
    }
    input::-webkit-input-placeholder{
      color:#969696;
      font-size:.28rem;
    }
  }
  .certificate{
    overflow: hidden;
    div{
      width: 100%;
      padding: .36rem 0 .36rem .24rem;
      font-size: .28rem;
      display: flex;
      flex-direction: row;
      align-items: center;
      p:nth-of-type(2){
        color: #969696;
        font-size: .26rem;
        margin-left: .15rem;
      }
    }
  }
  .uploadContainer{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: .24rem;
    .uploadImg{
      width: 1.14rem;
      height: 1.14rem;
      border-radius: .06rem;
      border: 1px dashed #e6e6e6;
      position: relative;
      label{
        width: 100%;
        height: 100%;
        display: block;
        background: url(https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/camera.png) no-repeat center center;
        background-size: .7rem .57rem;
      }
      input[type=file]{
        display: none;
      }
    }
    .uploadImg:not(:nth-of-type(1)){
      margin-left: .5rem;
    }
  }
  .sibmitBtn{
    width: 100%;
    padding-bottom: .8rem;
    button{
      width: 6.6rem;
      margin: 1rem auto 0;
      display: block;
      background: #9948c3;
      line-height: .3rem;
      text-align: center;
      border-radius: .1rem;
      padding: .25rem 0;
      color: #fff;
      font-size: .3rem;
    }
  }
  .reasonList{
    background: #fff;
    border-radius: .1rem;
    padding: .74rem 0;
    height: auto;
    width: 6rem;
    position: absolute;
    z-index: 9;
    left: 50%;
    top: 20%;
    transform: translate(-50%,0);
    li{
      font-size: .28rem;
      color: #323232;
      width: 80%;
      margin: 0 auto;
      display: flex;
      flex-direction: row;
      align-items: center;
      img{
        width: .42rem;
        height: .42rem;
        margin-right:.3rem;
      }
    }
    li:not(:nth-of-type(1)){
      margin-top:0.2rem;
    }
  }
  .context{
    width: 6rem;
    height: 2rem;
    z-index: 1000;
    position: fixed;
    background: white;
    top: 25%;
    left: 10%;
    p{
      font-size:.3rem;
      text-align:center;
      margin-top: .85rem;
    }
  }
  .textOpac{
    width:6rem;
    background:white;
    position: absolute;
    top: 27%;
    left: 10%;
    border-radius:.24rem;
    p{
      font-size:.22rem;
      color:#646464;
      text-align: center;
      padding: .32rem;
    }
    .inp{
      width: 3rem;
      height: .68rem;
      border: 1px solid #e5e5e5;
      border-radius: .34rem;
      display: block;
      margin: auto;
      text-align: center;
      margin-top: 10%;
    }
    .sBtn{
      border-top: 1px solid #e6e6e6;
      display: flex;
      margin-top: .5rem;
      button{
        width: 45%;
        font-size: .3rem;
        color: #646464;
        background: white;
        display: inline-block;
        padding: .25rem;
        margin-left: .2rem;
      }
    }
  }
}
